<template>
  <div class="ui-brick-wall-skeleton" :class="{'is-line-wrap': lineWrap}">
    <div
      class="ui-brick-wall-skeleton__item"
      v-for="index in innerSpan"
      :key="index"
    >
      <template v-if="index > 3">
        <div
          class="ui-brick-wall-skeleton__empty"
        ></div>
      </template>
      <template v-else>
        <div
          class="ui-brick-wall-skeleton__card"
          :style="colStyle"
        >
          <div class="ui-brick-wall-skeleton__card-main">
            <div class="ui-brick-wall-skeleton__card-content">
              <div class="ui-brick-wall-skeleton__card-avatar">
                <ui-skeleton width="32px" height="32px"></ui-skeleton>
              </div>
              <div class="ui-brick-wall-skeleton__card-fields">
                <div class="ui-brick-wall-skeleton__card-title">
                  <ui-skeleton width="30%" height="18px"></ui-skeleton>
                </div>
                <div class="ui-brick-wall-skeleton__card-description">
                  <ui-skeleton width="60%" height="18px"></ui-skeleton>
                </div>
              </div>
            </div>
            <div class="ui-brick-wall-skeleton__card-tools">
              <ui-skeleton width="30px" height="18px"></ui-skeleton>
            </div>
          </div>
          <div class="ui-brick-wall-skeleton__card-addon">
            <div class="ui-brick-wall-skeleton__card-addon-left">
              <ui-skeleton width="70%" height="18px"></ui-skeleton>
            </div>
            <div class="ui-brick-wall-skeleton__card-addon-right">
              <ui-skeleton width="30px" height="18px"></ui-skeleton>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
import UiSkeleton from '../skeleton'

export default {
  name: 'UiBrickWallSkeleton',
  components: {
    UiSkeleton
  },
  props: {
    lineWrap: {
      type: Boolean
    },
    span: {
      type: Number
    },
    colStyle: {
      type: Object
    }
  },
  computed: {
    innerSpan() {
      return this.span || 3
    }
  }
}
</script>
<style lang="less">
.ui-brick-wall-skeleton{
  display: flex;
  flex: row;
  &.is-line-wrap {
    .ui-brick-wall-skeleton__item,
    .ui-brick-wall-skeleton__empty{
      flex: 1;
      min-width: 0;
    }
  }
}
.ui-brick-wall-skeleton__item{
  &:not(:last-child) {
    margin-right: 24px;
  }
}
.ui-brick-wall-skeleton__card{
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 12px;
}
.ui-brick-wall-skeleton__card-main{
  display: flex;
  flex-direction: row;
}
.ui-brick-wall-skeleton__card-content{
  display: flex;
  flex-direction: row;
  flex: 1;
}
.ui-brick-wall-skeleton__card-fields{
  flex: 1;
}
.ui-brick-wall-skeleton__card-avatar{
  margin-right: 12px;
}
.ui-brick-wall-skeleton__card-title{
  margin-bottom: 12px;
}
.ui-brick-wall-skeleton__card-addon{
  border-top: 1px solid #eee;
  padding: 12px 0 0;
  margin-top: 12px;
  display: flex;
  flex-direction: row;
}
.ui-brick-wall-skeleton__card-addon-left{
  flex: 1;
}
</style>
